<template class="dashboard-main">
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="hover"
                 class="box-card">
          <div slot="header"
               class="clearfix">
            <div class="point"></div>
            <span>订单数量</span>
            <div class="main-title-right">
              <span>{{ orderSize }}</span>
              <a>(单)</a>
            </div>
          </div>
          <div v-for="o in orderList"
               :key="o.$index"
               @click="gotoOrder(o.status)"
               class="text item">
            {{ o.statusName }}&nbsp;&nbsp;{{ o.count }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"
                 class="box-card">
          <div slot="header"
               class="clearfix">
            <div class="point"></div>
            <span>用户数量</span>
            <div class="main-title-right">
              <span>{{ userSize }}</span>
              <a>(人)</a>
            </div>
          </div>
          <div v-for="o in userList"
               :key="o.$index"
               @click="gotoUser(o.status)"
               class="text item">
            {{ o.statusName }}&nbsp;&nbsp;{{ o.count }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"
                 class="box-card">
          <div slot="header"
               class="clearfix">
            <div class="point"></div>
            <span>金融产品</span>
            <div class="main-title-right">
              <span>{{ productSize }}</span>
              <a>(个)</a>
            </div>
          </div>
          <div v-for="o in productList"
               :key="o.$index"
               @click="gotoProduct(o.status)"
               class="text item">
            {{ o.statusName }}&nbsp;&nbsp;{{ o.count }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">
.point {
  float: left;
  margin-top: 4px;
  margin-right: 5px;
  height: 12px;
  border: 2px solid #58a3f3;
}
.clearfix span {
  font-size: 16px;
}
.main-title-right {
  float: right !important;
  & > span {
    font-size: 18px;
    color: #58a3f3;
  }
  & > a {
    font-size: 14px;
    color: #b4b9c6;
  }
}
.text {
  font-size: 14px;
  text-align: center;
  padding: 20px;
  &:hover {
    color: #fff;
  }
}
.item {
  margin-top: 20px;
  width: 100%;
  height: 60px;
  background-color: #f7f9fc;
  border: 1px solid #ecedf2;
  border-radius: 3px;
  &:hover {
    background: #54a8f7;
    border-radius: 3px;
  }
}
.el-card__body {
  padding-top: 0;
}
</style>

<script>
import { api } from '@/api'

export default {
  data() {
    return {
      orderSize: 0,
      userSize: 0,
      productSize: 0,
      orderList: [],
      userList: [],
      productList: []
    }
  },
  created() {
    this.getOrderCountList()
    this.getUserCountList()
    this.getProductCountList()
  },
  methods: {
    getOrderCountList() {
      this.$http.get(api.SYS_ORDER_COUNT).then(
        res => {
          res.data.forEach(item => {
            this.orderSize += item.count
          })
          this.orderList = res.data
        }
      )
    },
    getUserCountList() {
      this.$http.get(api.SYS_USER_COUNT).then(
        res => {
          res.data.forEach(item => {
            this.userSize += item.count
          })
          this.userList = res.data
        }
      )
    },
    getProductCountList() {
      this.$http.get(api.SYS_PRODUCT_COUNT).then(
        res => {
          res.data.forEach(item => {
            this.productSize += item.count
          })
          this.productList = res.data
        }
      )
    },
    gotoOrder(status) {
      const param = status + ''
      this.$router.push({
        name: 'order',
        query: {
          status: param
        }
      })
    },
    gotoUser(status) {
      const param = status + ''
      this.$router.push({
        name: 'user',
        query: {
          status: param
        }
      })
    },
    gotoProduct(status) {
      const param = status + ''
      this.$router.push({
        name: 'presentProduct',
        params: {
          status: param
        }
      })
    }
  }
}
</script>

